<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= stylesheet_link_tag font_awesome_css, bootstrap_css, bootstrap_theme_css %>
    <title>Bh test page (Rails)</title>
  </head>
  <body>
    <div class='container'>

    <h1>Alerts</h1>

      <!-- Try setting different :dismissible and :context options -->
      <%= alert_box 'You accepted the Terms of service.' %>

      <%= alert_box context: :warning, dismissible: true, id: 'alert', class: :en, data: {js: 1} do %>
        <em>Thanks!</em> You accepted the <%= link_to 'Terms of service', '/#terms' %>.
      <% end %>

    <h1>Panels</h1>

      <!-- Try setting different :title, :tag and :context options -->
      <%= panel 'You accepted the Terms of service', title: 'Thanks', tag: :aside %>

      <%= panel heading: 'Thanks', context: :info, id: 'panel', class: :en, data: {js: 1} do %>
        <div class='panel-body'>You accepted the Terms of service. <%= icon :ok %></div>
      <% end %>

    <h1>Panel rows</h1>

      <!-- Try setting a different :column_class option -->
      <%= panel_row column_class: 'col-sm-12' do %>
        <%= panel 'Plain full-width panel' %>
      <% end %>

      <%= panel_row column_class: 'col-sm-6', id: 'panel-row', class: :en, data: {js: 1} do %>
        <%= panel 'John Smith', title: 'User', context: :info %>
        <%= panel title: 'Phone' do %>
          <div class='panel-body'><%= icon :earphone %> 323-555-5555</div>
        <% end %>
      <% end %>

    <h1>Modals</h1>

      <!-- Try setting different :title, :size, :button or :context options -->
      <%= modal 'Do what you want!', button: {size: :small, context: :info} %>

      <%= modal title: 'Terms of service', size: :large, id: 'modal', button: {class: :en} do %>
        <div class="modal-body">Please accept the Terms of service.</div>
        <div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
      <% end %>

    <h1>Navs</h1>

      <!-- Try setting different :layout or :as options -->
      <%= nav do %>
        <%= link_to 'Home', '/' %>
        <%= link_to 'Users', '/#users' %>
        <%= link_to 'Profile', '/#profile' %>
      <% end %>

      <br />

      <%= nav as: :pills, id: 'nav', class: :en, data: {js: 1} do %>
        <li class="active"><a href="/">Home</a></li>
        <%= link_to 'Users', '/#users' %>
        <%= link_to 'Profile', '/#profile' %>
      <% end %>

    <h1>Navbars</h1>

      <!-- Try adding a horizontal element and setting different :inverted, :fluid, :position or :padding options -->
      <%= navbar inverted: true do %>
        <%= vertical do %>
          <%= link_to 'Home', '/' %>
        <% end %>
      <% end %>

      <%= navbar id: 'navbar' do %>
        <%= vertical id: 'vertical', class: :en, data: {js: 1} do %>
          <%= link_to 'Home', '/' %>
        <% end %>
        <%= horizontal class: :en, data: {js: 2} do %>
          <%= nav class: 'navbar-left' do %>
            <%= link_to 'Profile', '/#profile' %>
            <%= link_to 'Settings', '/#settings' %>
          <% end %>
        <% end %>
      <% end %>

    <h1>Buttons</h1>

    <!-- Try setting different :context, :size and :layout options -->
      <%= button 'Menu' %>

      <%= button context: :warning, id: 'button', class: :en, data: {js: 1} do %>
        Your <em>personal</em> menu
      <% end %>

    <h1>Dropdowns</h1>

      <!-- Try setting different :split, :direction, :align, :groupable, :layout, :context or :size options -->
      <%= dropdown 'Menu', direction: :up, context: :success, align: :right do %>
        <%= link_to 'Home', '/' %>
        <%= link_to 'Profile', '/#profile' %>
        <%= link_to 'Settings', '/#settings' %>
      <% end %>

      <%= dropdown 'Menu', split: true, id: 'dropdown', button: {class: :en} do %>
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#"><%= content_tag :em, 'Profile' %></a></li>
      <% end %>

    <h1>Progress bars</h1>

      <!-- Try passing multiple values with different :percentage, :label, :context, :striped, :animated options -->
      <%= progress_bar [{percentage: 75, striped: true}, {percentage: 20, context: :warning, label: true}] %>

      <%= progress_bar({percentage: 30, id: 'bar', data: {js: 1}}, id: 'container', class: :en) %>

    <h1>Icons</h1>

      <!-- Try setting a different :library option -->
      <%= icon :user %>

      <%= icon :user, library: :font_awesome, class: 'fa-2x', id: 'icon', data: {value: 1} %>

    <h1>Button to</h1>

      <%= button_to 'New', '#new', class: 'b', form_class: 'f', method: :get %>
      <br />
      <%= button_to 'New', '#new', class: 'b', form_class: 'f', method: :get, context: :primary %>

      <%= button_to '/#edit', method: :get, context: :link, id: 'my-btn-to', data: {value: 1} do %>
        Button <strong>styled</strong> as a link
      <% end %>

      <h1>Forms</h1>

      <%= form_for User.new, url: '/', method: :get, layout: :basic do |f| %>
        <%= f.legend 'User detail' %>
        <%= f.email_field :email, label: 'E-mail address' %>
        <%= f.password_field :password, placeholder: 'Your Password' %>
        <%= f.file_field :avatar %>
        <%= f.fieldset 'Newsletter' do %>
          <%= f.radio_button :subscribe, true, label: 'Subscribe to newsletter' %>
          <%= f.radio_button :subscribe, false, label: 'Do not subscribe to newsletter' %>
        <% end %>
        <%= f.telephone_field :phone, suffix: '☏' %>
        <%= f.check_box :remember_me, checked: true %>
        <%= f.submit 'Sign in' %>
      <% end %>

    </div>
    <%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' %>
    <%= javascript_include_tag bootstrap_js %>
  </body>
</html>